<style scoped>
.dashboard {
    /* background: url("../assets/Bitmap.png") no-repeat !important; */
    background: rgba(255, 255, 255, .7) !important;
    background-size: 100% 100%!important;
}

.datePicker {
    background: rgba(255, 255, 255, .7);
}

.dashboardContainer {
    position: relative;
}
</style>

<template>
    <div class="dashboardContainer">
        <date @pick="getDateFromPicker" class="datePicker"
         :sendMaxDateToPicker="sendMaxDate"
        ></date>
        <div :id="name" style="width:500px;height:400px;" class="dashboard">

        </div>
    </div>
</template>
<script>
import top from './header';
import date from "./datePicker";
import { Loading } from 'element-ui';
import { MessageBox } from 'element-ui';
var echarts = require("echarts/lib/echarts");
require('echarts/lib/chart/line/');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/title');
require('echarts/lib/component/legend')
export default {
    data() {
        return {
            lists: null,
            data: {
            },
            option: null,
            myChart: null,
            startTime: null,
            endTime: null,
            selectedDate: null,
            series: [],
            nameList: [],
            loading: true,
            loadingInstance: null
        }
    },
    props: {
        name: null,
        sendMaxDate:null
    },
    components: {
        date: date
    },
    mounted: function() {
        this.loadingInstance = Loading.service({
            target: "#" + this.name,
        })
        this.time = new Date().format("yyyy-MM-dd")
        this.startTime = "2017-08-01";
        this.endTime = this.sendMaxDate
        this.$http.jsonp('http://192.168.100.139:8787/time/' + this.startTime + "/" + this.endTime, { emulateJSON: true }, {
            headers: {
            },
        }).then(function(response) {
            this.loadingInstance.close();
            // 这里是处理正确的回调
            this.lists = response.data;

            this.draw();
        }, function(err) {
            console.log(err)
        });

    },
    methods: {
        getSeries() {
            this.nameList = [];
            this.series = [];
            for (var key in this.lists[0]) {
                if (key !== 'eid')
                    this.nameList.push(key)
            }
            var len = this.nameList.length;
            for (var i = 0; i < len; i++) {
                var dataList = [];
                for (var key in this.lists) {
                    var day = {
                        name: this.nameList[i],
                        value: [
                            new Date(this.lists[key].eid).format("yyyy-MM-dd"),
                            this.lists[key][this.nameList[i]]
                        ]
                    }
                    dataList.push(day)
                }
                this.series.push({
                    name: this.nameList[i],
                    type: 'line',
                    data: dataList,
                    showSymbol: false,
                    hoverAnimation: false
                })
            }
        },
        changeOption() {
            this.option = {
                title: { text: this.startTime + "~" + this.endTime, x: '5%', y: '2%' },
                color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'],
                tooltip: {
                    trigger: "axis"
                },
                toolbox: {
                    show: true,
                    x: "middle",
                    y: "6%",
                    feature: {
                        dataZoom: {
                            show: true, 
                            title: {
                                dataZoom: '区域缩放',
                                dataZoomReset: '区域缩放-后退'
                            }
                        },
                        restore: {
                            show: true,
                            title: '还原',
                            color: 'black'
                        },
                    }
                },
                legend: { data: this.nameList, y: "2%" },
                xAxis: {
                    type: "time",
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    scale: true, //缩放开关,true时Y轴不强制从0开始
                },
                series: this.series
            }
        },
        draw() {
            var ele = document.getElementById(this.name)

            ele.style.width = "100%"
            this.myChart = echarts.init(ele);

            // 绘制图表
            this.getSeries();
            this.changeOption();
            this.myChart.setOption(this.option);
        },
        getDateFromPicker(msg) {
            this.selectedDate = msg
            console.log(msg)
        },
        resize() {
            this.myChart.resize();
        },
    },
    watch: {
        selectedDate: {
            handler() {
                this.loadingInstance = Loading.service({
                    target: "#" + this.name,
                })
                if (this.selectedDate)
                    this.endTime = this.selectedDate.format("yyyy-MM-dd");
                this.$http.jsonp('http://192.168.100.139:8787/time/' + this.startTime + "/" + this.endTime, { emulateJSON: true }, {
                    headers: {
                    },
                }).then(function(response) {
                    this.loadingInstance.close();

                    // 这里是处理正确的回调
                    if (!response.data[0]) {
                        return MessageBox({
                            type: 'warning',
                            message: '没有查询到相应数据'
                        });
                    };
                    this.lists = response.data;
                    this.getSeries();
                    this.changeOption();
                    this.myChart.setOption(this.option);
                }, function(err) {
                    console.log(err)
                });
            }
        }
    }
}

</script>
